<template>
    <div id="customerDiagnosis">
        <div>
            <el-dialog title="客户诊断" :visible.sync="diagVisible" :before-close="handleClose" width="80%">
                <el-table :data="customerList" style="width: 100%">
                    <el-table-column prop="customer_id_name" label="客户名称" width="180">
                    </el-table-column>
                    <el-table-column prop="customer_area_id_name" label="客户所属区域" width="180">
                    </el-table-column>
                    <el-table-column prop="waybill_count" label="单量" width="100">
                    </el-table-column>
                    <el-table-column prop="total_freight" label="总运费" width="120">
                    </el-table-column>
                    <el-table-column prop="total_cost" label="总成本" width="120">
                    </el-table-column>
                    <el-table-column prop="gross_profit" label="毛利润" width="120">
                    </el-table-column>
                    <el-table-column prop="gross_profit_margin" label="毛利率" width="120">
                    </el-table-column>
                    <el-table-column prop="l_total_expense" label="揽收费用" width="120">
                    </el-table-column>
                    <el-table-column prop="g_total_expense" label="干线费用" width="120">
                    </el-table-column>
                    <el-table-column prop="p_total_expense" label="配送费用" width="120">
                    </el-table-column>
                    <el-table-column prop="hd_total_expense" label="回单费用" width="120">
                    </el-table-column>
                    <el-table-column prop="hx_total_expense" label="回箱费用" width="120">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
        <!-- 客户诊断详情 -->
        <div>
            <div>
                <el-dialog title="客户诊断详情" :visible.sync="diagVisibleDetail" width="80%">
                    <el-table :data="customerListDetail" style="width: 100%">
                        <el-table-column prop="waybill_no" label="运单号" width="120">
                            <template slot-scope="scope">
                                <span style="color: #409eff; cursor: pointer" @click="wayClick(scope.row)">
                                    {{ scope.row.waybill_no }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="customer_id_name" label="客户名称" width="180">
                        </el-table-column>
                        <el-table-column prop="customer_area_id_name" label="客户所属区域" width="180">
                        </el-table-column>

                        <el-table-column prop="waybill_product_type_name" label="承运类型" width="120">
                        </el-table-column>
                        <el-table-column prop="package_quantity" label="包装数量" width="100">
                        </el-table-column>
                        <el-table-column prop="package_type_name" label="包装类型" width="120">
                        </el-table-column>
                        <el-table-column prop="thermosphere_name" label="温层" width="150">
                        </el-table-column>
                        <el-table-column prop="from_region" label="出发城市" width="180">
                        </el-table-column>
                        <el-table-column prop="to_region" label="目的城市" width="180">
                        </el-table-column>
                        <el-table-column prop="receiver_address" label="收货地址" width="180">
                        </el-table-column>
                        <el-table-column prop="total_freight" label="总运费" width="120">
                        </el-table-column>
                        <el-table-column prop="total_cost" label="总成本" width="120">
                        </el-table-column>
                        <el-table-column prop="l_total_expense" label="揽收费用" width="120">
                        </el-table-column>
                        <el-table-column prop="g_total_expense" label="干线费用" width="120">
                        </el-table-column>
                        <el-table-column prop="p_total_expense" label="配送费用" width="120">
                        </el-table-column>
                        <el-table-column prop="hd_total_expense" label="回单费用" width="120">
                        </el-table-column>
                        <el-table-column prop="hx_total_expense" label="回箱费用" width="120">
                        </el-table-column>
          
                    </el-table>
                    <!-- 分页 -->
                    <div style="margin: 10px 0px 0px 0px; display: flex;justify-content: flex-end;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper" :total="pageList.total">
                        </el-pagination>
                    </div>
                </el-dialog>

            </div>

        </div>
    </div>
</template>
<script>
    import { diagnosis_customer, diagnosis_customer_detail } from "@/api/paymentrequest";
    export default {
        name: "customerDiagnosis",
        props: ['customerData', 'fatherMethodDetail'],
        data() {
            return {
                diagVisible: false,
                customerList: [],
                diagVisibleDetail: false,
                customerListDetail: [],
                pageList: {
                    page: 1,
                    page_size: 10,
                    total: 0,
                },
                currentPage4:1
            }
        },
        mounted() {
            console.log(this.customerData, "customerDatacustomerData")
            this.diagVisible = this.customerData.diagnosis
            this.diagnosis_customerObj()
        },
        methods: {
            diagnosis_customerObj() {
                var param = {
                    customer_id: this.customerData.customer_id + "",
                    search_time: String(this.customerData.search_time / 1000)
                }
                diagnosis_customer(param).then((res) => {
                    if (res.code == 10000) {
                        this.customerList = [res.data]
                        console.log(this.customerList, "diagnosis_customerdiagnosis_customer")
                    }

                })
            },
            handleClick() {
                this.diagVisibleDetail = true
                this.diagnosis_customerObj_Detail()
            },
            // 客户诊断详情
            diagnosis_customerObj_Detail() {
                var param = {
                    customer_id: this.customerData.customer_id + "",
                    search_time: String(this.customerData.search_time / 1000),
                    page: this.pageList.page,
                    page_size: this.pageList.page_size,
                }
                diagnosis_customer_detail(param).then((res) => {
                    if (res.code == 10000) {
                        this.customerListDetail = res.data.data
                        this.pageList.total = res.data.total
                    }
                })
            },
            handleClose() {
                this.fatherMethodDetail()
            },
            wayClick(value) {
                var id = value.waybill_id;
                let text = this.$router.resolve({
                    name: "waybillDetail",
                    query: { id, activeName: "1" },
                });
                window.open(text.href, "_blank");
            },
            handleSizeChange(val) {
                this.pageList.page_size = val
                console.log(`每页 ${val} 条`);
                this.diagnosis_customerObj_Detail()
            },
            handleCurrentChange(val) {
                this.pageList.page = val
                console.log(`当前页: ${val}`);
                this.diagnosis_customerObj_Detail()
            }
        }
    }
</script>
<style lang="less" scoped>

</style>